<template>
  <div class="layout">
    <el-container v-if="state.showMenu" class="container">
      <el-aside :class="['aside', { collapsed: !state.hideMenu }]">
        <div class="head">
          <div>
            <img src="/logo.png" alt="logo">
            <span>企业管理</span>
          </div>
        </div>
        <div class="toggle-menu-btn" @click="state.hideMenu = !state.hideMenu">
          <el-icon>
            <Expand v-if="state.hideMenu" />
            <Fold v-else />
          </el-icon>
        </div>
        <div class="line" />
        <el-menu
            background-color="#222832"
            text-color="#fff"
            :router="true"
            :default-openeds="state.defaultOpen"
            :default-active='state.currentPath'
            :collapse="!state.hideMenu"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Monitor /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/">
              <el-icon><Bell /></el-icon>
              <span>通知</span>
            </el-menu-item>
            <el-menu-item index="/showData">
              <el-icon><DataAnalysis /></el-icon>
              <span>数据展示</span>
            </el-menu-item>

          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/userInfo">
              <el-icon><UserFilled /></el-icon>
              <span>用户基本信息</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><Notebook /></el-icon>
              <span>词典管理</span>
            </template>
            <el-menu-item index="/entries">
              <el-icon><List /></el-icon>
              <span>词条管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/products">
              <el-icon><Bell /></el-icon>
              <span>商品数据</span>
            </el-menu-item>
            <el-menu-item index="/orders">
              <el-icon><DataAnalysis /></el-icon>
              <span>订单管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon><ChatDotRound /></el-icon>
              <span>论坛管理</span>
            </template>

            <el-menu-item index="/forum">
              <el-icon><i class="fas fa-comments"></i></el-icon>
              <span>数据展示</span>
            </el-menu-item>
          </el-sub-menu>

        </el-menu>
      </el-aside>
      <el-container class="content">
        <div class="main-content">
          <div class="main">
            <router-view />
          </div>
          <div class="footer">
            © 2025 小🐥管理平台 - 版权所有
          </div>
        </div>
      </el-container>
    </el-container>
    <el-container v-else class="container">
      <router-view />
    </el-container>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { localGet, pathMap, isTest } from '@/utils'

// 引入 Element Plus 图标
import {
  Monitor, Bell, DataAnalysis, User, UserFilled, Setting,
  Notebook, List, Goods, ChatDotRound, Expand, Fold
} from '@element-plus/icons-vue'

const noMenu = ['/login']
const router = useRouter()
const state = reactive({
  showMenu: true,
  hideMenu: true,
  defaultOpen: [],
  currentPath: '/',
})

router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    if (!localGet('token') && !isTest) {
      next({ path: '/login' })
    } else {
      next()
    }
  }
  state.showMenu = !noMenu.includes(to.path)
  state.currentPath = to.path
  document.title = pathMap[to.name]
})
</script>

<!-- 样式部分保持不变 -->

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #f5f7fa;
}
.container {
  height: 100vh;
  display: flex;
}
.aside {
  width: 240px !important;
  background: linear-gradient(180deg, #2c3e50 0%, #3498db 100%);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 100;
  position: relative;
}

.aside.collapsed {
  width: 64px !important;
}

.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 15px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.head > div {
  display: flex;
  align-items: center;
  transition: opacity 0.3s;
}

.head img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
}

.head span {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.aside.collapsed .head span {
  display: none;
}

.line {
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 5px 0;
}

.toggle-menu-btn {
  position: absolute;
  top: 70px;
  right: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1890ff 0%, #47b7ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 101;
  border: 2px solid #fff;
}

.toggle-menu-btn i {
  font-size: 14px;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 100vh;
  overflow: hidden;
}

.main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.main {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: #f5f7fa;
}

.footer {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a7a7a;
  font-size: 13px;
  border-top: 1px solid #e6ebf5;
  background: #fff;
}

/* 菜单样式 */
:deep(.el-menu) {
  border-right: none !important;
  background-color: transparent !important;
  padding: 10px 0;
}

:deep(.el-menu-item) {
  height: 48px;
  line-height: 48px;
  margin: 5px 8px;
  border-radius: 8px;
  color: #e3e3e3 !important;
  transition: all 0.3s;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

:deep(.el-menu-item.is-active) {
  background: linear-gradient(90deg, #1890ff 0%, #47b7ff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(28, 131, 225, 0.4);
}

:deep(.el-sub-menu__title) {
  color: #e3e3e3 !important;
  margin: 5px 8px;
  border-radius: 8px;
  height: 48px;
  line-height: 48px;
}

:deep(.el-sub-menu__title:hover) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

:deep(.el-icon) {
  font-size: 18px;
  margin-right: 8px;
}

:deep(.el-sub-menu) {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

:deep(.el-submenu:first-child) {
  border-top: none;
}

:deep(.el-sub-menu [class^="el-icon-"]) {
  vertical-align: -1px !important;
}

@media (max-width: 768px) {
  .aside {
    position: absolute;
    left: 0;
    height: 100%;
  }

  .aside.collapsed {
    transform: translateX(-100%);
  }

  .toggle-menu-btn {
    right: -35px;
  }
}
</style>

<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: #409eff;
  text-decoration: none;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}

.el-popper__arrow {
  display: none;
}
</style>